<template>
	<div :class="system.isMobile ? 'dialogBox' : ''">
        <div class="bg" @click="cancel"></div>
		<div class="feedBox" @mouseleave="hideInfo($event)" @mouseenter ="showInfo">
            <div class="feedCon">
                <span class="closer" @click="cancel"></span>
                <span class="top show">请输入产品功能问题及改进建议</span>
                <textarea class="textCon" v-model="userfeedback" placeholder="请输入您的意见/建议（200字以内）"></textarea>
                <div class="upload">
                    <div class="file" v-if="files">{{ fileName }}</div>
                    <div class="btn" v-else>
                        <el-upload
                            :show-file-list="false"
                            class="upload-demo"
                            multiple
                            action="https://wireai.com/api/apiindex/fileupload"
                            :data="{type:'file'}"
                            :headers="{ Token: useStore.token }"
                            :before-upload="checkFile"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="fileSuccess"
                            :before-remove="beforeRemove"
                            :on-progress = "handelProgress"
                            :limit="1"
                        >
                            <span>上传文件</span>
                        </el-upload>
                    </div>
                    <el-progress v-if="progress!=0 && !files" stroke-width="3" class="circle"  width="35" height="35" type="circle" >
                        <template #default="{ percentage }">
                            <span class="percentage">{{ progress }}%</span>
                        </template>
                    </el-progress>
                    <!-- <span :class="[{active:isType},'btnUp']" v-if="!files" @click.stop="openType"></span> -->
                    <span class="close" v-if="files" @click.stop="removeFile"></span>
                
                </div>
                <span class="tit-1 show">
                    支持上传1个文件/图片，格式为txt、docx、word、rft、pdf、wps、ppt、pptx、bmp、jpg、jpeg、png、gif，50MB以内。
                </span>
                <span class="tit-1 show">
                    更多问题/建议可以通过邮箱反馈：
                    wireai-service@dabai.com
                </span>
                <div class="btnpage flexC">
                    <span class="btnSubmit flexC" @click="save"><i>提交</i></span>
                </div>
            </div>
		    
		</div>
	</div>
    
</template>

<script setup lang='ts'>
    import { useSystemStore } from "@/store/modules/system";
	import { useUserStore } from "@/store/modules/user";
    const system = useSystemStore();
    const useStore = useUserStore();
    const $_ = inject('$_', null as any);
    const api = inject('$base', null as any);
    const typelist = ref<any>([
        { 'id' : 1, 'title':'上传文件', 'content' : '支持上传1个文件，格式为txt、doc、pdf、wps，50MB以内。' },
        { 'id' : 2, 'title':'上传图片', 'content' : '支持上传1个图片，格式为png、jpg、jpeg，50MB以内。' }
    ])
    const type = ref<number>(1);
    const isType = ref<boolean>(false);
    const userfeedback = ref<string>();
    const files = ref<string>('');
    const fileName = ref<string>();
	const timer = ref(null);
    const progress = ref<number>(0);
    const isCircle = ref<boolean>(false);
    function openType(){
        isType.value = !isType.value;
    }
    function checkType(id:number){
        type.value = id;
        isType.value = false;
    }
    function cancel(){
        console.log('00000')
        system.isShowfeed = false;
    }
	function showInfo(){
		console.log('2222')
	    system.isShowUer = true;
		clearTimeout(timer.value);
	}
	function hideInfo(e){
		e.stopPropagation();
		timer.value = setTimeout(()=>{
			system.isShowUer = false;
		},200);
	    
	}
    function save(){
        if(!userfeedback.value){
            ElMessage({
				message: '请输入您的意见/建议',
				type: 'error',
			});
            return;
        }
        // if(!files.value){
        //     ElMessage({
		// 		message: '请上传文件',
		// 		type: 'error',
		// 	});
        //     return;
        // }
        let data = {
            userid : useStore.userIds,
            userfeedback : userfeedback.value,
            feedbackfile : files.value,
        }
        api.useFeed(data).then(res=>{
            ElMessage({
				message: '功能问题已反馈,等待管理员处理',
				type: 'success',
			})
            system.isShowfeed = false;
            reset();
        })
    }
    function handelProgress(e){
        progress.value = e.percent.toFixed(0);
    }
    function checkFile(file){
        var fileSize = file.size / 1024 / 1024 < 50;
        const index = file.name.lastIndexOf(".");
        const ext = file.name.substr(index + 1).toLowerCase();
        let extarr = ['txt','docx','word','rft','pdf','wps','ppt','pptx','bmp','jpg','jpeg','png','gif'];
        if (extarr.indexOf(ext) == -1) {
            ElMessage({
				message: '请上传正确的文件格式',
				type: 'error',
			})
            return false;
        }
        if (!fileSize) {
            ElMessage({
				message: '文件大小不能超过50MB',
				type: 'error',
			})
            return false;
        }
    }
    function fileSuccess(response,file,filelist){
        console.log(response,file,filelist)
        let url = response.data.imgurl;
        fileName.value = url.substring(url.lastIndexOf('/') + 1);
        files.value = response.data.imgurl;
        progress.value = 0;
		ElMessage({
			message: '文件上传成功',
			type: 'success',
		})
    }
    function removeFile(){
        files.value = '';
        fileName.value = '';
    }
    function reset(){
        userfeedback.value = '';
        files.value = '';
        fileName.value = '';
    }
	function handleClickOutside(){
		system.isShowfeed = false;
	}
	onMounted(()=>{
		// window.addEventListener('click', handleClickOutside);
	})
</script>
<style lang="scss" scoped>
.show{
    display:block;
}
.dialogBox{
	position: fixed;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.2);
	z-index:99;
    
}
.bg{
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    height: 100vh;
    z-index:10;
}
.dialog{
	.feedBox{
		left: 50%;
		bottom: 50%;
		transform:translate(-50%,50%);
	}
}
.feedBox{
    width:320px;
    background:#fff;
    box-shadow:0 0 7px rgba(166,182,229,.6);
    position:fixed;
    left:290px;
    padding:5px 20px;
    bottom:100px;
    z-index:999;
    border-radius:10px;
    color:#9094b0;
   
    .closer{
        width:40px;
        height:40px;
        background:url(../../assets/images/close03.png) no-repeat center center;
        background-size:9px 9px;
        position:absolute;
        right:-20px;
        top:-5px;
        cursor:pointer;
    }
	.feedCon{
		position: relative;
		z-index: 999;
	}
    .top{
        color:#1b56b6;
        font-size:14px;
        line-height:50px;
        font-family:'siyuanM';
    }
    .textCon{
        width:100%;
        background:#f1f5fb;
        border-radius:5px;
        resize:none;
        height:80px;
        padding:5px;
        font-size:13px;
        line-height:24px;
        outline:none;
        margin-bottom:5px;
        font-family:'siyuanN';
        &::-webkit-input-placeholder {
            color:#9094b0;
            opacity:0.5;
        }
    }
    .tit-1{
        font-size:12px;
        line-height:18px;
        margin-bottom:5px;
        font-family:'siyuanR';
    }
    .upload{
        background:#f1f5fb;
        font-size:14px;
        width:100%;
        height:45px;
        border-radius:5px;
        margin-bottom:8px;
        line-height:45px;
        display:flex;
        justify-content:space-between;
        position:relative;
        .file{
            background:url(../../assets/images/icon_img.png) no-repeat 12px center #f1f5fb;
            background-size:13px 13px;
            height:100%;
            flex:1;
            padding-left:30px;
            max-width:calc(100% - 40px);
            overflow:hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .close{
            width:40px;
            height:100%;
            background:url(../../assets/images/close02.png) no-repeat center center;
            background-size:8px 8px;
            float:right;
            cursor:pointer;
        }
        .btn{
            flex:1;
            background:url(../../assets/images/icon4.png) no-repeat 12px center;
            background-size:13px 13px;
            cursor:pointer;
            padding-left:30px;
			user-select: none;
			cursor: default;
            position:relative;
            &:hover{
                background:url(../../assets/images/icon04.png) no-repeat 12px center;
                background-size:13px 13px;
                color:#2379f7;
            }
        }
        .circle{
            width:35px;
            height:35px;
            position:absolute;  
            right:5px;
            top:5px;  
            .percentage{
                color:#2379f7;
                font-size:10px;
                left:50%;
                transform:translate(-50%);
            }
        }
        .typeList{
            position:absolute;
            left:0;
            top:50px;
            width:100%;
            background:#fff;
            border-radius:5px;
            background:#fff;
            box-shadow:0 0 7px rgba(166,182,229,.6);     
            display:flex;
            padding:10px;
            li{
                border:solid 1px #3282f7;
                line-height:30px;
                text-align:center;
                flex:1px;
                border-radius:5px;  
                margin:0 10px;
                cursor:pointer;
                &.active{
                    background:#3282f7;
                    color:#fff;
                }
            }
        }
        .btnUp{
            width:40px;
            height:100%;
            background:url(../../assets/images/icon5.png) no-repeat center center;
            background-size:11px 7px;
            cursor:pointer;
            transition:all .5s;
			user-select: none;
            &.active{
                transform:rotate(180deg);
            }
        }
    }
    .btnpage{
        width:100%;
    }
    .btnSubmit{
		background-image: linear-gradient(90deg, #66e6b1, #2379ff);
        width:96px;
        height:32px;
        border-radius:5px;
        color:#fff;
        font-size:14px;
        margin:10px 10px 10px 5px;
        cursor:pointer;
        float:right;
        position:relative;
        &::after{
            background:#2379ff;
            position:absolute;
            left:0;
            top:0;
            content:'';
            width:100%;
            height:100%;
            opacity:0;
            transition:all .8s;
            border-radius:5px;
        }
        &:hover{
            &::after{
                opacity:1;
            }
        }
        i{
            position:relative;
            z-index:10;
            font-style:normal;
        }
    }
}
::v-deep .el-upload{
    width:100%;
    justify-content:start;
    font-family:'siyuanR';
}
::v-deep .el-progress path:first-child{
    stroke: #bdbfcc;
}
::v-deep .el-progress text {
    color: #e6451c;
}
::v-deep .el-progress__text{
    min-width:36px;
}
</style>